<template>
	<view>
		<!-- 懒加载动画 -->
		<view class="loading-box">
			<u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
		<view v-show="!loadingone">
			<navbar :name="hisUserId!='0'?'他的关注':'我的关注'"></navbar>
			<view class="searchstyle">
				<u-search bg-color="#fff" :show-action="false" @custom="custom" @search="search"
					placeholder="请输入您要搜索的内容"></u-search>
			</view>
			<view class="maybe" v-if="type == 1">
				您可能感兴趣的
			</view>
			<!-- 推荐 -->
			<scroll-view scroll-x="true" style="width: 100%;" v-if="type == 1">
				<view class="guess-box">
					<view class="mayView" @tap.stop="HisTap(item)"  v-for="(item,idx) in mayList"  :key="idx">
						<view class="userImage">
							<u-lazy-load border-radius="50" height="96" img-mode="aspectFill"
								:image="item.userAvatarUrl|| 'http://static.bsyjk.cn/l/65872593C2124F8381198C89479F28D6.png'"></u-lazy-load>
						</view>
						<view class="image-tj ">
							{{item.userNickName || '未知'}}
						</view>
						<!-- :class="item.mutualFollowFlag==1?'btnactavecolor':''" -->
						<button v-if="item.mutualFollowFlag == 0" class="isbutton" @tap.stop="attention(item,idx,'XQ')"
							type="default">已关注</button>
						<button v-if="item.mutualFollowFlag == 1" class="isbutton" @tap.stop="attention(item,idx,'XQ')"
							type="default">互相关注</button>
						<button v-if="item.mutualFollowFlag == 2" class="isbutton btnactavecolor"
							@tap.stop="attention(item,idx,'XQ')" type="default">关注</button>
					</view>
					<view class="" style="min-width: 20upx;height: 20upx;"></view>
				</view>
			</scroll-view>
			<!-- 关注 -->
			<view class="bgf">
				<view class="Arelookingat">
					正在关注
				</view>
				<block v-for="(item,idx) in attentionList" :key="idx">
					<view class="attentionView" @tap="HisTap(item)">
						<view class="hx-attention">
							<u-lazy-load border-radius="50" height="96" img-mode="aspectFill"
								:image="item.userAvatarUrl || 'http://static.bsyjk.cn/l/65872593C2124F8381198C89479F28D6.png'"></u-lazy-load>
						</view>
						<view class="hx-name">
							{{item.userNickName || '未知'}}
						</view>
						<button v-if="item.mutualFollowFlag == 0" class="attention-btn"
							@tap.stop="attention(item,idx,'XQ')" type="default">已关注</button>
						<button v-if="item.mutualFollowFlag == 1" class="attention-btn"
							@tap.stop="attention(item,idx,'XQ')" type="default">互相关注</button>
						<button v-if="item.mutualFollowFlag == 2" class="attention-btn btnactavecolor"
							@tap.stop="attention(item,idx,'XQ')" type="default">关注</button>
						<!-- <view class="attention-btn" :class="item.mutualFollowFlag == 0?'btnactavecolor':''" @tap="attention(item,idx,'GZ')">
							已关注
						</view> -->
					</view>
					<u-line />
				</block>
			</view>
			<view v-if="attentionList.length <=0" style="text-align: center;color: #9B9B9B;font-size: 30upx;">
				<view class="noDataicon">
				</view>
				暂无关注
			</view>
			<view style="height: 200upx;">

			</view>
		</view>
	</view>
</template>
<script>
	import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"

import uLine from "@/uview-ui/components/u-line/u-line.vue"
import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"

import uSearch from "@/uview-ui/components/u-search/u-search.vue"


	export default {
		components: {
			uLoading,
			uSearch,
			uLazyLoad,
			uLine
		},
		data() {
			return {
				hisUserId: '0',
				loadingone: false, //懒加载
				pageCurrent: 1, //页数
				pageSize: 10, //条数
				attentionList: [
				],
				mayList: [] ,//可能感兴趣
				type:'',// 1 从我的关注界面进度  2 从他的关注界面进入
			}
		},
		onLoad(e) {
			this.hisUserId = e.hisUserId ? e.hisUserId : '0';
			this.followGF(1, this.pageCurrent, this.pageSize, '') //获取关注
			this.getInterest(1, 10) //获取推荐
			this.type = e.type;//赋值等

		},
		methods: {
			// 他的主页
			HisTap(item) {
				// console.log(item)
				uni.navigateTo({
					url: '/pagesMy/my/homepage/homepage?hisUserId=' + item.userId
				})
			},
			// 回车搜索
			search(e) {
				this.pageCurrent = 1 //搜索默认展示第一页
				this.followGF(1, 1, this.pageSize, e)
			},
			// 点击搜索
			custom(e) {
				this.pageCurrent = 1 //搜索默认展示第一页
				this.followGF(1, 1, this.pageSize, e)
			},
			// 关注
			follow(id) {
				let _this = this,
					fdata = {
						followedId: id, //被关注id
						userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
					};
				this.$cms.post(global.apiUrls.follow, fdata).then(res => {
					if (res.data.code == 1000) {
						uni.showToast({
							title: '关注成功',
							duration: 2000
						});
						_this.followGF(1, 1, _this.pageSize, '')
						_this.getInterest(1, 10)
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none",
							duration: 2000
						});
					}
				})
			},
			DeleteFollow(id) {
				let _this = this,
					fdata = {
						followedId: id, //被关注id
						userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
					};
				this.$cms.delete(global.apiUrls.follow, fdata).then(res => {
					if (res.data.code == 1000) {
						uni.showToast({
							title: '取关成功',
							duration: 2000
						});
						_this.followGF(1, 1, _this.pageSize, '')
						_this.getInterest(1, 10)
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none",
							duration: 2000
						});
					}
				})
			},
			// 关注按钮
			attention(item, idx, type) {
				if (item.mutualFollowFlag == 1) { //取关
					this.DeleteFollow(item.userId);
				} else if (item.mutualFollowFlag == 0) { //取关
					this.DeleteFollow(item.userId);
				} else if (item.mutualFollowFlag == 2) { //关注
					this.follow(item.userId);
				}
			},
			// 可能感兴趣的人
			getInterest(pageCurrent, pageSize) {
				let _this = this;
				this.$cms.get(global.apiUrls.getInterest + '?userId=' + uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId +
						'&pageCurrent=' + pageCurrent +
						'&pageSize=' + pageSize, {})
					.then(res => {
						if (res.data.code == 1000) {
							let result = res.data.result;
							console.log(result)
							_this.mayList = result
						}
					}).catch(err => {})
			},
			// 正在关注
			followGF(type, pageCurrent, pageSize, keyword) {
				this.loadingone = true;
				let _this = this;
				if (this.hisUserId == '0') {//我的关注
					this.$cms.get(global.apiUrls.followGF + '?type=' + type + '&userId=' + uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z')
							.userId +
							'&keyword=' + keyword + '&pageCurrent=' + pageCurrent + '&pageSize=' + pageSize + '&hisUserId=' + this.hisUserId, {})
						.then(res => {
							if (res.data.code == 1000) {
								let records = res.data.result.records;
								_this.attentionList = records
							}
							_this.loadingone = false;
						}).catch(err => {})
				} else {//他的关注
					this.$cms.get(global.apiUrls.getHisList + '?type=' + type + '&userId=' + uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z')
							.userId +
							'&keyword=' + keyword + '&pageCurrent=' + pageCurrent + '&pageSize=' + pageSize + '&hisUserId=' + this.hisUserId, {})
						.then(res => {
							if (res.data.code == 1000) {
								let records = res.data.result.records;
								_this.attentionList = records
							}
							_this.loadingone = false;
						}).catch(err => {})
				}
			},
		}
	}
</script>
<style lang="scss">
	.noDataicon {
		width: 213upx;
		height: 209upx;
		background: url(https://bsyjk-pic.bsyjk.cn/empty/EFF804A9156249AD920DEF9CC805EFC7.png)no-repeat;
		background-size: 213upx 209upx;
		margin: 400upx auto 30upx;
	}
	.bgf {
		width: 750upx;
		background: #fff;
		margin: 36upx auto 0;
	}

	.attentionView {
		width: 710upx;
		height: 156upx;
		margin: 0 auto;
		display: flex;
		padding-top: 30upx;

		.hx-attention {
			width: 96upx;
			height: 96upx;
			margin-right: 19upx;
		}

		.hx-name {
			width: 450upx;
			margin-top: 29upx;
		}

		.attention-btn {
			width: 130upx;
			height: 50upx;
			background: #E2E1E2;
			color: #9B9B9B;
			border-radius: 13upx;
			margin-top: 30upx;
			font-size: 24upx;
			font-weight: 500;
			text-align: center;
			line-height: 50upx;
			padding: 0;
		}
	}

	.Arelookingat {
		width: 709upx;
		margin: 0 auto;
		font-size: 32upx;
		font-weight: 500;
		color: #000000;
		line-height: 75upx;
	}

	.searchstyle {
		width: 702upx;
		height: 64upx;
		margin: 23upx auto 0;
	}

	.maybe {
		margin: 43upx auto 30upx;
		width: 702upx;
		font-size: 32upx;
		font-weight: 500;
		color: #000000;
	}
	.guess-box{
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}

	.mayView {
		display: inline-block;
		min-width: 214upx;
		height: 255upx;
		padding: 24upx 0 0;
		background: #FFFFFF;
		border-radius: 14upx;
		margin-left: 20upx;

		.userImage {
			width: 96upx;
			height: 96upx;
			margin: 0 auto 21upx;
		}

		.image-tj {
			font-size: 24rpx;
			font-weight: 500;
			color: #333333;
			text-align: center;
			overflow: hidden;
			height: 30upx;
		}

		.isbutton {
			width: 120upx;
			height: 44upx;
			border-radius: 13upx;
			font-size: 24upx;
			font-weight: 500;
			line-height: 40upx;
			margin: 20upx auto 0;
			background: #E2E1E2;
			color: #9B9B9B;
		}
	}

	.btnactavecolor {
		background: #FF930A !important;
		color: #FFFFFF !important;
		border: 2upx solid #FF930A;
	}
</style>
